// const params = useParams() // 获取 ? 前面的数据
// const [query] = useSearchParams() // 获取 ? 后面的数据
// const router = useNavigate() // 路由跳转

import React, { Component, Suspense, lazy } from 'react'
import { HashRouter as Hash, Routes, Route, Navigate, Outlet, NavLink, useParams, useSearchParams, useNavigate, useRoutes } from 'react-router-dom'
import MyBtn from '../components/MyBtn'
// import MyData from './data'

import './index.scss'

const MyData = lazy(() => import('./data.js'))

export const styles = {
  box: {
    border: '1px solid #ddd',
    borderRadius: 15,
    padding: 15,
    margin: 15,
  }
}

export default class index extends Component {
  render() {
    return (
      <div>
        <h3>React 路由</h3>
        {/* <AppRouter></AppRouter> */}
        <Hash>
          <Suspense fallback={<Loading />}>
            <MyLayout></MyLayout>
          </Suspense>
        </Hash>
      </div>
    )
  }
}

const Loading = () => {
  console.log('Loading - 正在加载。。。');
  return (
    <div>
      <div>Loading - 正在加载。。。</div>
    </div>
  )
}

// class AppRouter extends Component {
//   render() {
//     return (
//       <Hash>
//         <MyLayout></MyLayout>
//       </Hash>
//     )
//   }
// }


class MyLayout extends Component {
  render() {
    return (
      <div style={styles.box}>
        <h4>路由视图</h4>
        <div style={styles.box}>
          <RouteLazy></RouteLazy>
          {/* <Routes>
            <Route path='/' element={<AppBox />}>
              <Route path='/' element={<Navigate to='/home' />}></Route>
              <Route path='/home' element={<Home />}></Route>
              <Route path='/mine/:userid?' element={<Mine />}></Route>
              <Route path='/find/:address/:title' element={<Find />}></Route>
              <Route path='/set' element={<SetSome />}></Route>
              <Route path='/classify' element={<Classify />}></Route>

              <Route path='/user' element={<User />}>
                <Route path='/user' element={<Navigate to='/user/add' />}></Route>
                <Route path='/user/add' element={<UserAdd />}></Route>
                <Route path='/user/list' element={<UserList />}></Route>
              </Route>
            </Route>

            <Route path='/login' element={<Login />}></Route>
            <Route path='/reg' element={<Reg />}></Route>
            <Route path='/findpass' element={<FindPass />}></Route>
            <Route path='/404' element={<NotFound />}></Route>
            <Route path='/503' element={<BadService />}></Route>
            <Route path='*' element={<Navigate to='404' />}></Route>
          </Routes> */}
        </div>
      </div >
    )
  }
}

// 路由懒加载
const RouteLazy = () => {
  return useRoutes([
    {
      path: '/',
      element: <AppBox />,
      children: [
        { path: '/', element: <Navigate to='/home' /> },
        { path: '/home', element: <Home /> },
        { path: '/mine/:userid?', element: <Mine /> },
        { path: '/find/:address/:title', element: <Find /> },
        { path: '/set', element: <SetSome /> },
        { path: '/classify', element: <Classify /> },
        {
          path: '/user', element: <User />,
          children: [
            { path: '/user', element: <Navigate to='/user/add' /> },
            { path: '/user/add', element: <UserAdd /> },
            { path: '/user/list', element: <UserList /> },
          ]
        },
      ]
    },
    {
      path: '/login',
      element: <Login />,
    },
    {
      path: '/reg',
      element: <Reg />,
    },
    {
      path: '/findpass',
      element: <FindPass />,
    },
    {
      path: '/data',
      element: <MyData />,
    },
    {
      path: '/404',
      element: <NotFound />,
    },
    {
      path: '/503',
      element: <BadService />,
    },
    {
      path: '*',
      element: <Navigate to='/404' />,
    },
  ])
}

class AppBox extends Component {
  render() {
    return (
      <div>
        <h4>AppBox - AppBox - 主视图 - (嵌套路由)</h4>
        <div style={styles.box}>
          <Outlet></Outlet>
          <div style={styles.box}>
            <NavLink to='/home'>首页</NavLink>
            <NavLink to='/find/武汉/江夏一日游?tips=so hot'>发现</NavLink>
            <NavLink to='/mine/4090?time=0314'>个人中心</NavLink>
            <NavLink to='/set'>设置</NavLink>
            <NavLink to='/classify'>分类</NavLink>
            <NavLink to='/user'>用户</NavLink>
          </div>
        </div>
      </div>
    )
  }
}

const Classify = () => {
  return (
    <div>
      <div>Classify - Classify - 分类</div>
    </div>
  )
}

const User = () => {
  return (
    <div>
      <div>User - User - 用户</div>
      <Outlet></Outlet>
      <NavLink to='/user/add'>新增用户</NavLink>
      <NavLink to='/user/list'>用户列表</NavLink>
    </div>
  )
}

const UserAdd = () => {
  return (
    <div>
      <div>UserAdd - UserAdd - 新增用户</div>
    </div>
  )
}

const UserList = () => {
  return (
    <div>
      <div>UserList - UserList - 用户列表</div>
    </div>
  )
}

const Home = () => {
  const router = useNavigate()
  return (
    <div>
      <div>Home - Home - 首页</div>
      <hr />
      <MyBtn text='登录' onClick={() => { router('/login') }}></MyBtn>
      <MyBtn text='注册' onClick={() => { router('/reg') }}></MyBtn>
    </div>
  )
}



const Mine = () => {
  const params = useParams() // 获取 ? 前面的数据
  const [query] = useSearchParams() // 获取 ? 后面的数据
  const router = useNavigate() // 路由跳转
  return (
    <div>
      <div>Mine - Mine - 个人中心</div>
      <div>userid = {params.userid}</div>
      <div>time = {query.get('time')}</div>
      <hr />
      <MyBtn text='首页' onClick={() => { router('/home') }}></MyBtn>
    </div>
  )
}

// 纯函数组件
const Find = () => {
  const params = useParams()
  const [query] = useSearchParams()
  const router = useNavigate()
  return (
    <div>
      <div>Find - Find - 发现</div>
      <div>address = {params.address}</div>
      <div>title = {params.title}</div>
      <div>tips = {query.get('tips')}</div>
      <hr />
      <MyBtn text='首页' onClick={() => { router('/home') }}></MyBtn>
      <MyBtn text='个人中心' onClick={() => { router('/mine/4090?time=0314') }}></MyBtn>
      <MyBtn text='返回' onClick={() => { router(-1) }}></MyBtn>
    </div>
  )
}

class SetSome extends Component {
  render() {
    return (
      <div>
        <div>SetSome - SetSome - 设置信息</div>
      </div>
    )
  }
}

const Login = () => {
  const router = useNavigate()
  return (
    <div>
      <div>Login - Login - 登录</div>
      <hr />
      <MyBtn text='返回' onClick={() => { router(-1) }}></MyBtn>
    </div>
  )
}

const Reg = () => {
  const router = useNavigate()
  return (
    <div>
      <div>Reg - Reg - 注册</div>
      <hr />
      <MyBtn text='返回' onClick={() => { router(-1) }}></MyBtn>
    </div>
  )
}

class FindPass extends Component {
  render() {
    return (
      <div>
        <div>FindPass - FindPass - 找回密码</div>
      </div>
    )
  }
}

class NotFound extends Component {
  render() {
    return (
      <div>
        <div>NotFound - NotFound - 404</div>
      </div>
    )
  }
}

const BadService = () => {
  return (
    <div>
      <div>BadService - BadService - 503</div>
    </div>
  )
}
